<template>
	<a-modal v-model:open="dialogVisible" title="调解协议预览" width="70%">
		<div class="container">
			<!-- 上部分 -->
			<div class="upper-section">
				<div class="centered-text">
					<h1 class="large-red-text">{{ dataItem.companyName }}</h1>
					<p>
						<span style="color: red">({{ dataItem.mediationLetterDate.substring(0, 4) }})</span>
						<span>{{ dataItem.provAbbr }} 诉前调第</span>
						<span style="color: red">
							({{ dataItem.mediationLetterDate.substring(0, 4)
							}}{{ dataItem.mediationNum.toString().padStart(6, '0') }})
						</span>
						<span>函字第</span>
						<span style="color: red"
							>{{ dataItem.mediationLetterDate.substring(0, 4)
							}}{{ dataItem.documentNumber.toString().padStart(8, '0') }}</span
						>
						<span>号</span>
					</p>
				</div>
			</div>

			<!-- 中间红线 -->
			<div class="red-line" />

			<!-- 下部分 -->
			<div class="lower-section">
				<div class="content-block">
					<p>被申请人：{{ dataItem.debtorName }}　　身份证号：{{ dataItem.debtorCardId }}</p>
					<div class="main-content">
						<p v-for="(para, i) in formatContent(dataItem.content)" :key="i">{{ para }}</p>
					</div>
					<div class="signature-block">
						<div class="stamp-container">
							<p>{{ dataItem.companyName }} (公章)</p>
							<p>调解员：{{ dataItem.mediatorName }}　联系电话：{{ dataItem.mediationPersonPhone }}</p>
							<p>调解中心电话：{{ dataItem.mediationCenterPhone }}</p>
							<p>监督举报电话：{{ dataItem.supervisionPhone }}</p>
							<p>{{ dataItem.mediationLetterDate }}</p>
							<p>{{ dataItem.date }}</p>
							<img :src="dataItem.officialSealUrl" alt="公章" class="stamp" @error="handleImageError" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<a-space>
					<a-button v-if="carouselData.length > 1" @click="prevSlide" :disabled="currentSlide === 0"> 上一页</a-button>
					<span v-if="carouselData.length > 1" class="page-indicator">
						{{ currentSlide + 1 }} / {{ carouselData.length }}
					</span>
					<a-button
						v-if="carouselData.length > 1"
						@click="nextSlide"
						:disabled="currentSlide === carouselData.length - 1"
					>
						下一页
					</a-button>
					<a-button type="primary" @click="dialogVisible = false">关闭</a-button>
				</a-space>
			</div>
		</template>
	</a-modal>
</template>

<script setup>
	import { ref, watch } from 'vue'
	import mediationProtocolApi from '@/api/website/protocol/mediationProtocolApi'

	const dialogVisible = ref(false)
	const dataItem = ref({})

	// 格式化内容为段落数组
	const formatContent = (content) => {
		if (!content) return []
		return content.split('\n').filter((para) => para.trim())
	}

	const onOpen = async (record) => {
		dialogVisible.value = true
		dataItem.value = await mediationProtocolApi.preview(record.id)
	}

	defineExpose({ onOpen })
</script>

<style scoped>
	/* 样式保持不变 */
	.container {
		width: 90%;
		margin: 1% auto 0;
		font-family: 'SimSun', '宋体', serif;
		overflow: visible;
		border: 1px solid rgba(0, 0, 0, 0.1);
		min-height: 600px;
	}

	.upper-section {
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.centered-text {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.large-red-text {
		font-size: 32px;
		color: red;
		margin-bottom: 16px;
		font-weight: bold;
	}

	.small-text {
		font-size: 18px;
		color: black;
	}

	.red-line {
		height: 2px;
		background-color: red;
		width: 98%;
		margin: 0 auto;
	}

	.lower-section {
		padding: 20px 0;
		overflow: visible;
	}

	.content-block {
		line-height: 1.8;
		width: 98%;
		margin: 0 auto;
	}

	.main-content {
		margin: 20px 0;
	}

	.main-content p {
		text-indent: 2em;
		margin: 12px 0;
	}

	.signature-block {
		text-align: right;
		margin-top: 60px;
		position: relative;
	}

	.stamp-container {
		display: inline-block;
		position: relative;
		text-align: center;
	}

	.stamp {
		width: 150px;
		position: absolute;
		right: 20px;
		top: 30%;
		transform: translateY(-50%) rotate(-15deg);
		opacity: 0.6;
		pointer-events: none;
	}

	p {
		margin: 8px 0;
		word-break: break-word;
	}

	.dialog-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.page-indicator {
		font-weight: bold;
		margin: 0 10px;
	}

	:deep(.custom-dots) {
		bottom: -20px;

		li {
			margin: 0 4px;

			button {
				width: 10px;
				height: 10px;
				border-radius: 50%;
			}
		}
	}
</style>
